<!DOCTYPE html>
<html>

	<head>
		<title>首页</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8OF48VX8Z3sySB555GH5lEO3QAmKTSig"></script>-->
		<link rel="stylesheet" href="../lib/weui.min.css">
		<link rel="stylesheet" href="../css/jquery-weui.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/indexcss.css" />
		<style type="text/css">
	    #loding {
				min-width: 320px;
				max-width: 640px;
				margin: 0px auto;
			}

		</style>
	</head>

	<body ontouchstart>
		<div class="weui-tab">
			<div class="weui-tab__bd">
				<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
					<div id="head">
						<div class="head_top">
							<div>
								<img src="img/2017-03-28_125335.png" align="center" />
								<span id="adress">获取中地址请等待...</span>
							</div>
							<div class="head_contant">
								<div>
									<p>21℃</p>
									<p>多云天</p>
								</div>
								<img src="img/tianqi.png" />
							</div>
							<div id="allmap"></div>
							<p class="cb"></p>
							<div class="weui-search-bar" id="searchBar">
								<form class="weui-search-bar__form">
									<div class="weui-search-bar__box">
										<i class="weui-icon-search"></i>
										<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
										<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
									</div>
									<label class="weui-search-bar__label" id="searchText">
                                    <i class="weui-icon-search"></i>
                                    <span style="line-height: 26px;">搜索商家、商品名称</span>
                                      </label>
								</form>
								<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
							</div>

						</div>
						<div class="weui-flex">
							<div class="weui-flex__item">水饺</div>
							<div class="weui-flex__item">99炸鸡</div>
							<div class="weui-flex__item">烤鸭</div>
							<div class="weui-flex__item">烤肉</div>
							<div class="weui-flex__item">青团</div>
							<div class="weui-flex__item">牛肉</div>
							<div class="weui-flex__item">酱骨头</div>
						</div>
					</div>
					<p class="cb"></p>
					<div id="content">
						<!--分割线-->
						<!--仿轮播-->
						<div class="swiper-container wu_lubo1">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<div class="weui-flex ">
										<div class="weui-flex__item" @click="wu_link(1)">
											<img src="img/meishi.jpg" />
											<p>美食</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(2)">
											<img src="img/tianping.jpg" />
											<p>甜品饮品</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(3)">
											<img src="img/shangpingchaoshi.jpg" />
											<p>商品超市</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(4)">
											<img src="img/guoshushengxian.jpg" />
											<p>果蔬生鲜</p>
										</div>
									</div>
									<div class="weui-flex ">
										<div class="weui-flex__item" @click="wu_link(5)">
											<img src="img/xindianteihui.jpg" />
											<p>新店特惠</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(6)">
											<img src="img/zhunshida.jpg" />
											<p>准时达</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(7)">
											<img src="img/pisayimian.jpg" />
											<p>下午茶</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(8)">
											<img src="img/chuangxiangcai.jpg" />
											<p>土豪推荐</p>
										</div>
									</div>
									<div class="h30">

									</div>
								</div>
								<div class="swiper-slide">
									<div class="weui-flex">
										<div class="weui-flex__item" @click="wu_link(9)">
											<img src="img/xianhuandangao.jpg" />
											<p>鲜花蛋糕</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(10)">
											<img src="img/hanbao.jpg" />
											<p>汉堡</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(11)">
											<img src="img/rihanliaoli.jpg" />
											<p>日韩料理</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(12)">
											<img src="img/malatang.webp" />
											<p>麻辣烫</p>
										</div>
									</div>
									<div class="weui-flex">
										<div class="weui-flex__item" @click="wu_link(13)">
											<img src="img/jiancan.jpg" />
											<p>简餐</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(14)">
											<img src="img/tuhaotuijian.jpg" />
											<p>川香菜</p>
										</div>
										<div class="weui-flex__item" @click="wu_link(15)">
											<img src="img/baozizhoudain.jpg" />
											<p>包子粥店</p>
										</div>
										<div class="weui-flex__item">
										</div>
									</div>
									<div class="h30">

									</div>
								</div>
							</div>
							<div class="swiper-pagination"></div>
						</div>
						<!--轮播-->
						<div class="swiper-container wu_lubo2">
							<div class="swiper-wrapper">
								<div class="swiper-slide"><img src="img/timg (1).jpg" width="100%" /></div>
								<div class="swiper-slide"><img src="img/timg.jpg" width="100%" /></div>
							</div>
						</div>

						<!--限时抢-->
						<div class="timego">
							<span>限时抢购</span><span>距离结束&nbsp;<span class="hh">03</span><b>:</b><span class="mm">57</span><b>:</b><span class="ss">20</span></span>
							<span class="more1" @click="more">
								更多&gt;
							</span>
						</div>

						<!--仿轮播框架-->
						<div class="swiper-container wu_lubo3">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<div class="weui-flex">
										<div class="weui-flex__item" v-for="item in products1" onclick="wu_alinck1(this)" id="{{item.id}}">
											<img :src="item.attributes.img" />
											<p v-html="item.attributes.name"></p>
											<p class="wu_p">￥<span v-html="price"></span><label>￥22</label></p>
										</div>
									</div>
								</div>
								<div class="swiper-slide">
									<div class="weui-flex">
										<div class="weui-flex__item" v-for="item in products1" onclick="wu_alinck1(this)" id="{{item.id}}">
											<img :src="item.attributes.img" />
											<p v-html="item.attributes.name"></p>
											<p class="wu_p"><span>￥9.9</span><label>￥22</label></p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--品质优选-->
						<div class="quality">
							-品质优选- <span class="pinzhimore" @click="pinzhimore1">更多&gt;</span>
						</div>
						<!--//加载的loding-->
						<!--//这是未加载出来时显示的loding图-->
						<div id="loding" v-if="type==true">
							<img src="img/dddddd.gif" />
						</div>
						<!--商家信息-->
						<div class="weui-panel weui-panel_access" v-for="item in products" onclick="wu_alinck(this)" id="{{item.id}}">
							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" :src="item.attributes.img">
									</div>
									<div class="weui-media-box__bd">
										<h4 class="weui-media-box__title" v-html="item.attributes.name"></h4>
										<p>
											4.7 月售300单
										</p>
										<p>￥35元起|配送费￥2元|￥16/人<span>30分钟</span><span>2.24km</span></p>
									</div>
								</a>
							</div>
						</div>

					</div>
				</div>
			</div>

			<div class="weui-tabbar">
				<a href="index.html" class="weui-tabbar__item weui-bar__item--on">
					<div class="weui-tabbar__icon">
						<img src="../images/icon_nav_button.png" alt="">
					</div>
					<p class="weui-tabbar__label">外卖</p>
				</a>
				<a href="../find/find.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="../images/icon_nav_msg.png" alt="">
					</div>
					<p class="weui-tabbar__label">发现</p>
				</a>
				<a href="../mymenu/mymenu.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="../images/icon_nav_article.png" alt="">
					</div>
					<p class="weui-tabbar__label">订单</p>
				</a>
				<a href="../mine/mine.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="../images/icon_nav_cell.png" alt="">
					</div>
					<p class="weui-tabbar__label">我的</p>
				</a>
			</div>
		</div>
		<script src="../lib/jquery-2.1.4.js"></script>
		<script src="../js/jquery-weui.min.js"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.4/av-min.js"></script>
		<script type="text/javascript">
			$("#content .wu_lubo1").swiper({
				loop: true,
			});
			$("#content>.wu_lubo2").swiper({
				loop: true,
				autoplay: 3000
			});
			$("#content>.wu_lubo3").swiper({
				loop: true,
			});
			$("#adress").click(function() {
				location.href = "../adress/adress.html"
			});
			var vue = new Vue({
				el: "body",
				data: {
					products: "",
					price: parseInt(Math.random() * 10 + 5),
					products1: [],
					type: false,
				},

				created: function() {
					var APP_ID = '9etyUbhi95RBWTaoLBTyW5HP-gzGzoHsz';
					var APP_KEY = '6IkehXVEvUELlpo1SAf1c8PR';
					AV.init({
						appId: APP_ID,
						appKey: APP_KEY
					});

					var mthis = this;
					var query = new AV.Query('Business');
					query.limit(parseInt(Math.random() * 10 + 5)); // 最多返回 10 条结果
					query.skip(parseInt(Math.random() * 100)); // 跳过 20 条结果
					query.find().then(function(products) {
						mthis.products = products;
						for(var i = 1; i <= 4; i++) {
							mthis.products1.push(products[i]);
						}
					}).catch(function(error) {
						console.log("查询列表失败");     
					});
					type = true;
				},
				methods: {
					wu_link: function(index) {
						location.href = "../column/column.html?index=" + index;
					},
					more: function() {
						location.href = "../xsqg/index.html";
					},
					pinzhimore1: function() {
						location.href = "../pinzhiyouxuan/pinzhiyouxuan.html";
					}
				},
			});

			function wu_alinck(t) {
				location.href = "../Business-details/Business-details.html?index=" + t.getAttribute("id");
			}

			function wu_alinck1(t) {
				location.href = "../xsqg/index.html?index=" + t.getAttribute("id");
			}

			function daojishi() {
				var time = new Date();
				var hh = time.getHours();
				var mm = time.getMinutes();
				var ss = time.getSeconds();
				$(".hh").html(((33 - hh) > 23 ? 33 - hh - 24 : 33 - hh) < 10 ? "0" + ((33 - hh) > 23 ? 33 - hh - 24 : 33 - hh) : ((33 - hh) > 23 ? 33 - hh - 24 : 33 - hh));
				$(".mm").html((59 - mm) < 10 ? "0" + (59 - mm) : (59 - mm));
				$(".ss").html((59 - ss) < 10 ? "0" + (59 - ss) : (59 - ss));
			}
			daojishi();
			setInterval(function() {
				daojishi()
			}, 1000)
		</script>
	</body>

</html>